<template>
  <a-modal
    v-model:visible="editModal.visible"
    width="600px"
    :body-style="{ overflowY: 'auto' }"
    :mask-closable="false"
    :keyboard="false"
    :title="titleStr || '选择归档文档'"
    :destroy-on-close="true"
    @cancel="closeModal"
  >
    <a-card>
      <DirectoryTree
        v-if="editModal.visible"
        ref="refDirectoryTree"
        :tree-data-list="treeDataList"
        :checkable="true"
        :is-show-operation="false"
        :max-height="maxHeight"
        @getTreeChecked="getTreeChecked"
      />
    </a-card>
    <template #footer>
      <div class="text-center">
        <a-button @click="closeModal">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { reactive, ref, nextTick } from 'vue'
const emits = defineEmits(['onGetArchiveFolderId'])
// const { treeDataList }
defineProps<{
  treeDataList?: [] | undefined
  titleStr?: string
}>()
const editModal = reactive({
  visible: false
})
const maxHeight = window.innerHeight - 300
const checkedKey = ref<any>([])
const pathNameStr = ref('')
const closeModal = () => {
  checkedKey.value = []
  pathNameStr.value = ''
  editModal.visible = false
}
const getTreeChecked = ({ checkedKeys, pathName }) => {
  checkedKey.value = checkedKeys
  pathNameStr.value = pathName
}
const handleSubmit = () => {
  if (!checkedKey.value || !checkedKey.value.length) {
    return message.warning('请选择归档位置！')
  }
  emits('onGetArchiveFolderId', { checkedKey: checkedKey.value[0], pathName: pathNameStr.value })
  closeModal()
}

const refDirectoryTree = ref<any>(null)
const show = (data) => {
  editModal.visible = true
  if (data && (data.speedFolderId || data.archiveFolderId)) {
    nextTick(() => {
      const ids = data.speedFolderId || data.archiveFolderId
      checkedKey.value = [ids]
      pathNameStr.value = data.pathName
      refDirectoryTree.value?.setCheckedTree([ids])
    })
  }
}
defineExpose({
  show
})
</script>
